<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>记住用户名和密码</title>
    </head>

    <body>
        <input type="text" placeholder="请输出入用户名" id="i1"/>
        <input type="text" placeholder="请输入密码" id="i2"/>
        <input type="checkbox" id="i3"/>
        <button id="btn">登录</button>
        <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //1.点击按钮时,判断用户是否勾选记住密码框,如果勾选,将用户名和密码输入框里的值配上对应的key组成两条cookie存储.
            //2.当再次进入网页时,判读服务器是否有对应的cookie,如果有,将每条cookie对应的value显示在用户和密码输入框里.
            //3.点击按钮时,如果用户没有勾选记住密码, 将之前存储的cookie删除.
            if (hasKey("username")) {
            	   i1.value = getValueByKey("username");
            }
            if (hasKey("password")) {
            	   i2.value = getValueByKey("password");
            	   i3.checked = true;
            }
            btn.onclick = function(){
                if (i3.checked) {
                	   addCookie("username", i1.value, 60*60*24);
                	   addCookie("password", i2.value, 60*60*24);
                } else{
                	   deleteCookie("username");
                	   deleteCookie("password");
                }
            }
        </script>
    </body>

</html>